<template>
  <view class="rollcall-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back-btn" @click="goBack">
        <image src="/static/images/back.png" mode="aspectFit"></image>
      </view>
      <view class="title">点击右侧切换模式</view>
      <view class="mode-switch" @click="switchMode">
        <text>{{ currentMode === 'shout' ? '卡片模式' : '喊停模式' }}</text>
      </view>
    </view>
    
    <!-- 游戏规则说明 -->
    <view class="rules-container">
      <text class="rules-title">游戏规则</text>
      <text class="rules-text" v-if="currentMode === 'shout'">
        1. 点击"开始"按钮随机选择学生\n
        2. 点击"停止"按钮确定当前选择\n
        3. 已选学生将显示在下方列表中
      </text>
      <text class="rules-text" v-else>
        1. 卡片初始显示数字编号\n
        2. 点击卡片翻转显示学生姓名\n
        3. 每次重置后学生顺序将重新随机排列
      </text>
    </view>
    
    <!-- 喊停模式 -->
    <view class="shout-mode" v-if="currentMode === 'shout'">
      <!-- 当前选中学生展示 -->
      <view class="current-student" :style="{backgroundColor: bgColor}">
        <text class="name">{{ currentStudent || '准备开始' }}</text>
        <text class="hint">{{ isRolling ? '随机选择中...' : '点击开始按钮' }}</text>
      </view>
      
      <!-- 控制按钮 -->
      <view class="controls">
        <view 
          class="btn action-btn" 
          @click="startRollcall" 
          :class="{stop: isRolling}"
        >
          <image :src="isRolling ? '/static/images/stop.png' : '/static/images/start.png'" mode="aspectFit"></image>
          <text>{{ isRolling ? '停止' : '开始' }}</text>
        </view>
      </view>
      
      <!-- 已选学生列表 -->
      <view class="selected-list">
        <view class="list-header">
          <text>已选学生名单 ({{ selectedStudents.length }}/{{ allStudents.length }})</text>
        </view>
        
        <scroll-view class="list-content" scroll-y>
          <view 
            class="student-item" 
            v-for="(student, index) in selectedStudents" 
            :key="index"
          >
            <text class="order">{{ index + 1 }}.</text>
            <text class="name">{{ student }}</text>
            <text class="time">{{ getSelectionTime(index) }}</text>
          </view>
          
          <view class="empty-tip" v-if="selectedStudents.length === 0">
            <image src="/static/images/empty.png" mode="aspectFit"></image>
            <text>暂无已选学生</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 卡片翻转模式 -->
    <view class="card-mode" v-else>
      <view class="card-grid">
        <view 
          class="card" 
          v-for="(card, index) in cards" 
          :key="index"
          :class="{flipped: card.flipped, selected: card.selected}"
          @click="flipCard(index)"
        >
          <view class="card-front">
            <text>{{ index + 1 }}</text>
          </view>
          <view class="card-back">
            <text>{{ card.student }}</text>
          </view>
        </view>
      </view>
      
      <view class="card-controls">
        <view class="btn reset" @click="resetCards">
          <image src="/static/images/reset.png" mode="aspectFit"></image>
          <text>重新洗牌</text>
        </view>
      </view>
      
      <view class="selection-display" v-if="currentPickedStudent">
        <text>当前选中: {{ currentPickedStudent }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentMode: 'shout', // 'shout' or 'card'
      allStudents: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'],
      selectedStudents: [],
      selectionTimes: [],
      currentStudent: '',
      isRolling: false,
      rollInterval: null,
      bgColor: '#f8f9fa',
      colors: [
        '#FF9AA2', '#FFB7B2', '#FFDAC1', '#E2F0CB', 
        '#B5EAD7', '#C7CEEA', '#F8C8DC', '#A2D2FF',
        '#BDE0FE', '#CDB4DB', '#FFC8DD', '#FFAFCC'
      ],
      // 卡片模式数据
      cards: [],
      currentPickedStudent: ''
    }
  },
  created() {
    this.initCards()
    // 从本地存储加载学生名单
    const savedStudents = uni.getStorageSync('rollcall_students')
    if (savedStudents) {
      this.allStudents = savedStudents
      this.initCards()
    }
  },
  onUnload() {
    clearInterval(this.rollInterval)
  },
  methods: {
    // 初始化卡片数据
    initCards() {
      // 随机排序学生名单
      const shuffledStudents = [...this.allStudents].sort(() => Math.random() - 0.5)
      
      this.cards = shuffledStudents.map(student => ({
        student,
        flipped: false,
        selected: false
      }))
    },
    
    // 切换模式
    switchMode() {
      this.currentMode = this.currentMode === 'shout' ? 'card' : 'shout'
      this.currentStudent = ''
      this.isRolling = false
      clearInterval(this.rollInterval)
    },
    
    // 喊停模式方法
    startRollcall() {
      if (this.isRolling) {
        // 停止点名
        clearInterval(this.rollInterval)
        this.isRolling = false
        this.addSelectedStudent()
      } else {
        // 开始点名
        if (this.allStudents.length === 0) {
          uni.showToast({
            title: '没有学生可点名',
            icon: 'none'
          })
          return
        }
        
        this.isRolling = true
        this.rollInterval = setInterval(() => {
          const remainingStudents = this.allStudents.filter(
            student => !this.selectedStudents.includes(student)
          )
          
          if (remainingStudents.length === 0) {
            clearInterval(this.rollInterval)
            this.isRolling = false
            uni.showToast({
              title: '所有学生已选择完毕',
              icon: 'none'
            })
            return
          }
          
          const randomIndex = Math.floor(Math.random() * remainingStudents.length)
          this.currentStudent = remainingStudents[randomIndex]
          
          // 随机背景色
          const colorIndex = Math.floor(Math.random() * this.colors.length)
          this.bgColor = this.colors[colorIndex]
        }, 100)
      }
    },
    
    // 添加选中学生
    addSelectedStudent() {
      if (this.currentStudent && !this.selectedStudents.includes(this.currentStudent)) {
        this.selectedStudents.push(this.currentStudent)
        this.selectionTimes.push(new Date())
        uni.setStorageSync('rollcall_students', this.allStudents)
      }
    },
    
    // 获取选择时间
    getSelectionTime(index) {
      const time = this.selectionTimes[index]
      if (!time) return ''
      
      const hours = time.getHours().toString().padStart(2, '0')
      const minutes = time.getMinutes().toString().padStart(2, '0')
      return `${hours}:${minutes}`
    },
    
    // 卡片模式方法
    flipCard(index) {
      if (this.cards[index].selected) return
      
      this.cards[index].flipped = !this.cards[index].flipped
      
      if (this.cards[index].flipped) {
        this.currentPickedStudent = this.cards[index].student
        this.cards[index].selected = true
        this.addSelectedStudent()
      }
    },
    
    // 重置卡片
    resetCards() {
      this.initCards()
      this.selectedStudents = []
      this.selectionTimes = []
      this.currentPickedStudent = ''
    },
    
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.rollcall-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  padding: 20rpx;
  box-sizing: border-box;
  
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    position: relative;
    z-index: 10;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .mode-switch {
      padding: 10rpx 20rpx;
      background: #4facfe;
      border-radius: 50rpx;
      
      text {
        font-size: 24rpx;
        color: white;
      }
    }
  }
  
  // 游戏规则样式
  .rules-container {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
    
    .rules-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .rules-text {
      font-size: 24rpx;
      color: #666;
      white-space: pre-line;
      line-height: 1.6;
    }
  }
  
  // 喊停模式样式
  .shout-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .current-student {
      width: 100%;
      height: 280rpx;
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 40rpx;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.3));
      }
      
      .name {
        font-size: 64rpx;
        font-weight: bold;
        color: #333;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        margin-bottom: 20rpx;
        animation: pulse 1.5s infinite;
      }
      
      .hint {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }
    
    .controls {
      display: flex;
      justify-content: center;
      margin-bottom: 40rpx;
      
      .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 10rpx;
        }
        
        text {
          font-size: 32rpx;
          color: white;
          font-weight: bold;
        }
        
        background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
        
        &.stop {
          background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
        }
      }
    }
    
    .selected-list {
      flex: 1;
      background: white;
      border-radius: 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
      
      .list-header {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .list-content {
        max-height: 300rpx;
        
        .student-item {
          display: flex;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #eee;
          
          .order {
            font-size: 28rpx;
            color: #666;
            margin-right: 20rpx;
            width: 40rpx;
          }
          
          .name {
            flex: 1;
            font-size: 28rpx;
            color: #333;
          }
          
          .time {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .empty-tip {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 200rpx;
          
          image {
            width: 120rpx;
            height: 120rpx;
            margin-bottom: 20rpx;
            opacity: 0.5;
          }
          
          text {
            font-size: 28rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  // 卡片模式样式
  .card-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
      margin-bottom: 40rpx;
      
      .card {
        width: 100%;
        height: 160rpx;
        perspective: 1000rpx;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        
        &.flipped {
          transform: rotateY(180deg);
        }
        
        &.selected {
          .card-back {
            background: #e0f7fa;
          }
        }
        
        .card-front, .card-back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          border-radius: 15rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
        }
        
        .card-front {
          background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
          transform: rotateY(0deg);
          
          text {
            font-size: 48rpx;
            font-weight: bold;
            color: white;
          }
        }
        
        .card-back {
          background: white;
          transform: rotateY(180deg);
          
          text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
        }
      }
    }
    
    .card-controls {
      display: flex;
      justify-content: center;
      margin-bottom: 30rpx;
      
      .reset {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        border-radius: 50rpx;
        padding: 0 40rpx;
        background: white;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.95);
        }
        
        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 15rpx;
        }
        
        text {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
        }
      }
    }
    
    .selection-display {
      background: white;
      border-radius: 50rpx;
      padding: 20rpx 30rpx;
      box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
      text-align: center;
      
      text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
    }
  }
}

/* 动画定义 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* 横屏适配 */
@media (orientation: landscape) {
  .rollcall-page {
    .shout-mode {
      flex-direction: row;
      align-items: flex-start;
      
      .current-student {
        width: 40%;
        height: 350rpx;
        margin-right: 30rpx;
        margin-bottom: 0;
      }
      
      .controls {
        margin-right: 30rpx;
        margin-bottom: 0;
      }
      
      .selected-list {
        flex: 1;
        height: 400rpx;
        
        .list-content {
          max-height: 300rpx;
        }
      }
    }
    
    .card-mode {
      .card-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30rpx;
        
        .card {
          height: 200rpx;
        }
      }
    }
  }
}
</style>